<template>
	<view class="top-info headerTop">
		<myNaveBar title="守护商城"></myNaveBar>
		<view class="banner bannerHeight">
			<mySwiper :list="bannerList" :height="231" radius="19rpx" :spacing="0" :padding="0" imgMode="scaleToFill"
				:width="692" @taped="bannerClick"></mySwiper>
		</view>
		<view class="fixed-top-view bgfff" :class="[isFixed ? 'fixed-top' : '']" :style="{top: navHeight+'px'}">
			<view class="search flex-ac-jb radius">
				<u-search placeholder="输入关键字搜索商品" v-model="keyword" :showAction="false" bgColor="transparent"
					placeholderColor="#C1C1C1" @focus="inputFocus"></u-search>
				<view class="saveBtn radius">搜索</view>
			</view>
			<u-tabs :list="tabs" @change="changeTab" :current="currentIndex" keyName="name" lineColor="#4467E6"
				:activeStyle="{ color: '#4467E6', 'font-size': '30rpx' }"
				:inactiveStyle="{ color: '#888888', 'font-size': '30rpx' }"></u-tabs>
		</view>
		<view class="fixed-top-place" v-if="isFixed"></view>
	</view>
	<swiper :current="currentIndex" @change="swiperChange" :style="{
      height: mainHeight + 'px',
      width: '750rpx'
    }">
		<swiper-item v-for="(items, indexs) in list" :key="indexs">
			<scroll-view :style="{ height: mainHeight + 'px' }" :scroll-y="isScroll" :scroll-into-view="isNotFixed"
				class="scroll-view-bg">
				<view id="isNotFixed"></view>
				<indexList :list="items"></indexList>
			</scroll-view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import mySwiper from '@/components/myComponents/swiper.vue';
	import indexList from './components/index-list.vue';
	import {
		ref,
		inject,
		nextTick,
		watch
	} from 'vue';
	import {
		onLoad,
		onHide,
		onPageScroll
	} from '@dcloudio/uni-app';
	const list = ref([]); //大数组
	const bannerList = ref([]); //轮播图数据
	const keyword = ref(''); //搜索框数据
	const tabs = ref([]); //tab选项卡数据
	const currentIndex = ref(0); //选项卡下标
	const mainHeight = ref(200); //主题内容高度
	const isFixed = ref(false) //是否吸顶
	const isScroll = ref(false) //是否可滚动，isFixed即可处理，但是H5的scroll-view里scroll-y=true才可以使用scroll-into-view
	const bannerHeight = ref(50) //轮图高度
	const navHeight = ref(getApp().globalData.navHeight); //自定义导航栏高度
	const isNotFixed = ref('') //处理吸顶后，用户拉动导致swper内容不归位
	onLoad(() => {
		getBanner(); //轮播图
		getTabs(); //选项卡
		getMainHeight(); //获取主体内容swiper高度
	});
	onPageScroll((e) => { //页面滚动吸顶
		isFixed.value = e.scrollTop >= bannerHeight.value ? true : false
		isScroll.value = e.scrollTop >= bannerHeight.value ? true : false
	});
	onHide(()=>{ //页面隐藏监听
		// #ifdef H5
		isFixed.value = false //h5bug处理，对滚动支持低
		// #endif
	})
	watch(isFixed, (newVal, oldVal) => {
		console.log('isFixed', newVal);
		if (!newVal) {
			isScroll.value = true
			isNotFixed.value = 'isNotFixed'
		} else {
			isNotFixed.value = ''
		}
	})

	const inputFocus = () => { //搜索框聚焦
		uni.pageScrollTo({
			scrollTop: bannerHeight.value,
			duration: 100
		});
	}
	const getMainHeight = () => {
		setTimeout(() => {
			const windowHeight = uni.getSystemInfoSync().windowHeight;
			let query = uni.createSelectorQuery();
			query
				.select('.bannerHeight')
				.boundingClientRect((res) => {
					bannerHeight.value = res.height + 17 //padding-bottom的值rpx换算px;
					mainHeight.value = windowHeight - 85 - navHeight.value; //可视区域高度 - 吸顶区域高度-自定义导航栏高度
				})
				.exec();
		}, 500);
	};
	const getBanner = () => { //获取轮播图数据
		bannerList.value = [{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			},
			{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
			},
			{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
			}
		];
	};
	const bannerClick = (e) => { //轮播图点击
		console.log(e);
	}
	const getTabs = () => {
		tabs.value = [{
				name: '健康养生'
			},
			{
				name: '医疗器械'
			},
			{
				name: '营养药膳'
			},
			{
				name: '中医药材'
			},
			{
				name: '音乐'
			},
			{
				name: '美食'
			},
			{
				name: '文化'
			},
			{
				name: '财经'
			},
			{
				name: '手工'
			}
		];
		// 初始化新闻列表数组 元素数量与分类匹配
		for (var i = 0; i < tabs.value.length; i++) {
			list.value.push([]);
		}
		getData();
	};

	const changeTab = (e) => { //选项卡点击
		currentIndex.value = e.index;
	};

	const swiperChange = (e) => { //swiper切换
		let index = e.detail.current;
		currentIndex.value = index;
	};

	const getData = () => { //获取数据
		let currentVal = currentIndex.value;
		for (var i = 0; i < 5; i++) {
			let obj = {
				id: i + 1,
				shopLogo: 'https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg',
				shopName: '戴乐行旗舰店',
				desc: '守护之影是一家专注一医疗智能健康的门店主要生产医疗器械',
				product: [{
						id: 1,
						img: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2215436172221/O1CN01iu6Owd1SHGZcQ5EsD_!!0-item_pic.jpg_580x580q90.jpg_.webp',
						title: '高精度血糖手表血压手环智能血糖健康手环无创测血糖手表适用于华为苹果手机',
						price: 3999
					},
					{
						id: 2,
						img: 'https://img.alicdn.com/img/i1/3947043504/O1CN012WZHyV1bkskUQ1cMr_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
						title: '戴乐行血糖手表高精度无创测血糖智能动态血糖仪手环血糖仪D2',
						price: 3999
					},
					{
						id: 3,
						img: 'https://img.alicdn.com/img/i1/3947043504/O1CN012WZHyV1bkskUQ1cMr_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
						title: '戴乐行血糖手表高精度无创测血糖智能动态血糖仪手环血糖仪D2',
						price: 3999
					},
					{
						id: 4,
						img: 'https://img.alicdn.com/img/i1/3947043504/O1CN012WZHyV1bkskUQ1cMr_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
						title: '戴乐行血糖手表高精度无创测血糖智能动态血糖仪手环血糖仪D2',
						price: 3999
					},
					{
						id: 5,
						img: 'https://img.alicdn.com/img/i1/3947043504/O1CN012WZHyV1bkskUQ1cMr_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
						title: '戴乐行血糖手表高精度无创测血糖智能动态血糖仪手环血糖仪D2',
						price: 3999
					},
					{
						id: 6,
						img: 'https://img.alicdn.com/img/i1/3947043504/O1CN012WZHyV1bkskUQ1cMr_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
						title: '戴乐行血糖手表高精度无创测血糖智能动态血糖仪手环血糖仪D2',
						price: 3999
					}
				]
			};
			list.value[currentVal].push(obj);
		}
	};
</script>

<style lang="scss">
	.fixed-top {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		width: 750rpx;
	}

	/* #ifdef  H5 */
	.fixed-top {
		top: 44px;
	}

	/* #endif */
	page {
		background: #fff;
	}

	.top-info {
		.banner {
			padding: 0 20rpx;
			margin-bottom: 34rpx;
		}

		.search {
			height: 85rpx;
			background: #f1f1f1;
			padding-right: 13rpx;

			.saveBtn {
				width: 113rpx;
				height: 63rpx;
			}
		}
	}

	.fixed-top-view {
		height: 170rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.fixed-top-place {
		height: 170rpx;
	}
</style>